<template>
  <div class="outBox">
    <!-- AI对话框 -->
    <div class="ai-chat-container" style="width: 40%">
      <div class="chat-messages" ref="chatMessages">
        <div
          v-for="(message, index) in chatMessages"
          :key="index"
          :class="[
            'message',
            message.sender === 'user' ? 'user-message' : 'ai-message',
          ]"
        >
          <div class="message-avatar">
            {{ message.sender === "user" ? "👤" : "🤖" }}
          </div>
          <div class="message-content">
            <p>{{ message.text }}</p>
          </div>
        </div>

        <div class="message ai-message" v-if="isGenerating">
          <div class="message-avatar">🤖</div>
          <div class="message-content">
            <div class="typing-indicator">
              <span></span>
              <span></span>
              <span></span>
            </div>
          </div>
        </div>
      </div>

      <div class="chat-input-container">
        <input
          type="text"
          v-model="chatInput"
          placeholder="描述您的修改需求..."
          class="chat-input"
          @keyup.enter="sendChatMessage"
          :disabled="isGenerating"
        />
        <button
          class="chat-send-btn"
          @click="sendChatMessage"
          :disabled="isGenerating"
        >
          发送
        </button>
      </div>
    </div>
    <!-- AI生成结果 -->
    <div
      class="ai-result"
      v-if="aiGeneratedBouquet && !isGenerating"
      style="width: 50%"
    >
      <div class="result-preview">
        <img :src="image" alt="AI生成花束" class="ai-preview-image" />
        <!-- 添加收藏按钮 -->
        <button
          class="favorite-btn"
          @click.stop="toggleFavorite('ai')"
          :class="{ favorited: isFavorited('ai') }"
        >
          <span v-if="isFavorited('ai')">❤️</span>
          <span v-else>🤍</span>
        </button>
      </div>
      <div class="result-info">
        <div class="result-actions">
          <button class="btn-outline" @click="regenerateAIBouquet">
            重新生成
          </button>
          <button class="btn-outline" @click="newChat">新对话</button>
          <button class="btn-primary" @click="addAIBouquetToCart">
            直接购买
          </button>
        </div>
      </div>
    </div>

    <!-- 增强的AI生成等待动画 -->
    <div
      class="ai-generating-animation"
      v-if="isGenerating && !aiGeneratedBouquet"
      style="width: 50%"
    >
      <div class="flower-animation-container">
        <div class="flower-animation"></div>

        <!-- 添加小花动态加载效果 -->
        <div class="mini-flowers-container">
          <div class="mini-flower mini-flower-1">🌸</div>
          <div class="mini-flower mini-flower-2">🌹</div>
          <div class="mini-flower mini-flower-3">🌺</div>
          <div class="mini-flower mini-flower-4">🌻</div>
          <div class="mini-flower mini-flower-5">🌼</div>
          <div class="mini-flower mini-flower-6">💐</div>
        </div>
      </div>

      <p class="generating-text">AI正在为您精心设计花束</p>
      <div class="generating-progress">
        <div class="progress-step" :class="{ active: generatingStep >= 1 }">
          分析需求
        </div>
        <div class="progress-step" :class="{ active: generatingStep >= 2 }">
          选择花材
        </div>
        <div class="progress-step" :class="{ active: generatingStep >= 3 }">
          设计搭配
        </div>
        <div class="progress-step" :class="{ active: generatingStep >= 4 }">
          完成设计
        </div>
      </div>
      <p class="generating-tip">{{ generatingTips[currentTipIndex] }}</p>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import CryptoJS from "crypto-js";
export default {
  name: "diyAISpeak",
  data() {
    return {
      title: "",
      Inscription: "",
      //判断点击
      isClick: 1,
      //签名数据
      utcTime: "",
      utcTimeShort: "",
      AccessKeyID: "AKLTZmFlNzMwNGM5ZWVjNDc5MGI1YWIwMDRjYzA1YTU3NWM",
      SecretAccessKey:
        "WWpjeU1HTmhNRGc0TURoak5ERTFOR0V3TldOaE5UUTBObU5qTUdKallqWQ==",
      Region: "cn-north-1",
      Service: "cv",
      Action: "CVProcess",
      Version: "2022-08-31",
      Host: "visual.volcengineapi.com",
      SignedHeaders: "host;x-date",
      //图片
      image: "",
      // 收藏相关
      favorites: [],
      showFavoriteToast: false,
      favoriteToastType: "add", // 'add' 或 'remove'

      // 搜索和推荐
      searchQuery: "",
      activeRecommendTab: "popular",
      recommendedBouquets: [
        {
          id: 1,
          name: "浪漫粉玫瑰",
          price: 199,
          image: "@/assets/images/bouquet-1.jpg",
          isPopular: true,
          isNew: false,
          isNearby: false,
          flowers: [
            { id: 1, name: "粉玫瑰", quantity: 11 },
            { id: 5, name: "满天星", quantity: 3 },
            { id: 6, name: "绿叶", quantity: 5 },
          ],
          packaging: 2,
        },
        {
          id: 2,
          name: "向日葵阳光",
          price: 168,
          image: "@/assets/images/bouquet-2.jpg",
          isPopular: true,
          isNew: false,
          isNearby: false,
          flowers: [
            { id: 3, name: "向日葵", quantity: 5 },
            { id: 6, name: "绿叶", quantity: 4 },
          ],
          packaging: 1,
        },
        {
          id: 3,
          name: "百合之恋",
          price: 258,
          image: "@/assets/images/bouquet-3.jpg",
          isPopular: false,
          isNew: false,
          isNearby: true,
          flowers: [
            { id: 4, name: "百合", quantity: 6 },
            { id: 5, name: "满天星", quantity: 3 },
            { id: 6, name: "绿叶", quantity: 4 },
          ],
          packaging: 3,
        },
        {
          id: 4,
          name: "混合花束",
          price: 288,
          image: "@/assets/images/bouquet-4.jpg",
          isPopular: false,
          isNew: false,
          isNearby: true,
          flowers: [
            { id: 1, name: "粉玫瑰", quantity: 3 },
            { id: 2, name: "红玫瑰", quantity: 3 },
            { id: 4, name: "百合", quantity: 2 },
            { id: 5, name: "满天星", quantity: 2 },
            { id: 6, name: "绿叶", quantity: 3 },
          ],
          packaging: 2,
        },
        {
          id: 5,
          name: "紫色洋桔梗",
          price: 228,
          image: "@/assets/images/bouquet-5.jpg",
          isPopular: false,
          isNew: true,
          isNearby: false,
          flowers: [
            { id: 7, name: "洋桔梗", quantity: 8 },
            { id: 5, name: "满天星", quantity: 3 },
            { id: 6, name: "绿叶", quantity: 4 },
          ],
          packaging: 2,
        },
        {
          id: 6,
          name: "蓝色绣球花",
          price: 268,
          image: "@/assets/images/bouquet-6.jpg",
          isPopular: false,
          isNew: true,
          isNearby: false,
          flowers: [
            { id: 8, name: "绣球花", quantity: 3 },
            { id: 6, name: "绿叶", quantity: 5 },
          ],
          packaging: 3,
        },
        {
          id: 7,
          name: "附近花店特选",
          price: 188,
          image: "@/assets/images/bouquet-7.jpg",
          isPopular: false,
          isNew: false,
          isNearby: true,
          flowers: [
            { id: 2, name: "红玫瑰", quantity: 7 },
            { id: 5, name: "满天星", quantity: 3 },
            { id: 6, name: "绿叶", quantity: 4 },
          ],
          packaging: 1,
          shopName: "花艺坊",
          distance: "0.8km",
        },
        {
          id: 8,
          name: "附近花店推荐",
          price: 298,
          image: "@/assets/images/bouquet-8.jpg",
          isPopular: false,
          isNew: false,
          isNearby: true,
          flowers: [
            { id: 7, name: "洋桔梗", quantity: 5 },
            { id: 8, name: "绣球花", quantity: 2 },
            { id: 6, name: "绿叶", quantity: 3 },
          ],
          packaging: 2,
          shopName: "花之语",
          distance: "1.2km",
        },
      ],

      // 自由创作模式数据
      activeTab: "flowers",
      tabs: [
        { id: "flowers", name: "花材选择" },
        { id: "packaging", name: "包装选择" },
        { id: "card", name: "贺卡选择" },
      ],
      availableFlowers: [
        {
          id: 1,
          name: "粉玫瑰",
          price: 15,
          image: "@/assets/images/flower-1.jpg",
        },
        {
          id: 2,
          name: "红玫瑰",
          price: 18,
          image: "@/assets/images/flower-2.jpg",
        },
        {
          id: 3,
          name: "向日葵",
          price: 20,
          image: "@/assets/images/flower-3.jpg",
        },
        {
          id: 4,
          name: "百合",
          price: 25,
          image: "@/assets/images/flower-4.jpg",
        },
        {
          id: 5,
          name: "满天星",
          price: 10,
          image: "@/assets/images/flower-5.jpg",
        },
        {
          id: 6,
          name: "绿叶",
          price: 5,
          image: "@/assets/images/flower-6.jpg",
        },
        {
          id: 7,
          name: "洋桔梗",
          price: 18,
          image: "@/assets/images/flower-7.jpg",
        },
        {
          id: 8,
          name: "绣球花",
          price: 35,
          image: "@/assets/images/flower-8.jpg",
        },
      ],
      availablePackaging: [
        {
          id: 1,
          name: "简约牛皮纸",
          price: 15,
          image: "@/assets/images/packaging-1.jpg",
        },
        {
          id: 2,
          name: "韩式花束包装",
          price: 25,
          image: "@/assets/images/packaging-2.jpg",
        },
        {
          id: 3,
          name: "礼盒包装",
          price: 45,
          image: "@/assets/images/packaging-3.jpg",
        },
      ],
      availableCards: [
        {
          id: 1,
          name: "生日贺卡",
          price: 10,
          image: "@/assets/images/card-1.jpg",
        },
        {
          id: 2,
          name: "爱情贺卡",
          price: 10,
          image: "@/assets/images/card-2.jpg",
        },
        {
          id: 3,
          name: "感谢贺卡",
          price: 10,
          image: "@/assets/images/card-3.jpg",
        },
      ],
      selectedFlowers: [],
      selectedPackaging: null,
      selectedCard: null,
      cardMessage: "",
      bouquetName: "",
      previewImage: "@/assets/images/bouquet-preview.jpg",
      bouquetPrice: 0,

      // AI生成模式数据
      chatInput: this.$route.query.Text,
      chatMessages: [],
      isGenerating: false,
      aiGeneratedBouquet: null,
      generatingStep: 0,
      generatingTips: [
        "不同的花材有不同的花语，玫瑰代表爱情，百合代表纯洁...",
        "花束的色彩搭配很重要，互补色往往能产生惊艳效果",
        "季节性花材更新鲜，也更环保",
        "包装也是花束的重要组成部分，能提升整体美感",
        "适合的花束能表达您的心意，传递您的情感",
      ],
      currentTipIndex: 0,
      tipInterval: null,
    };
  },
  computed: {
    filteredRecommendedBouquets() {
      if (this.activeRecommendTab === "popular") {
        return this.recommendedBouquets.filter((bouquet) => bouquet.isPopular);
      } else if (this.activeRecommendTab === "new") {
        return this.recommendedBouquets.filter((bouquet) => bouquet.isNew);
      } else if (this.activeRecommendTab === "nearby") {
        return this.recommendedBouquets.filter((bouquet) => bouquet.isNearby);
      }
      return this.recommendedBouquets;
    },
    // 创建规范请求
    CanonicalRequest() {
      let requestDataString;
      // 判断点击，获取不同数据
      if (this.isClick == 1) {
        requestDataString = JSON.stringify(this.requestData);
      } else if (this.isClick == 2) {
        requestDataString = JSON.stringify(this.modifyData);
      }
      const hash = this.sha256Hash(requestDataString);
      const CanonicalRequest =
        "POST" +
        "\n" +
        "/" +
        "\n" +
        `Action=${this.Action}&Version=${this.Version}` +
        "\n" +
        `host:${this.Host}` +
        "\n" +
        `x-date:${this.utcTime}` +
        "\n" +
        "\n" +
        `${this.SignedHeaders}` +
        "\n" +
        hash;
      return CanonicalRequest;
    },
    //创建待签名字符串
    StringToSign() {
      const CanonicalRequestHash = this.sha256Hash(this.CanonicalRequest);
      const StringToSign =
        "HMAC-SHA256" +
        "\n" +
        `${this.utcTime}` +
        "\n" +
        `${this.utcTimeShort}/${this.Region}/${this.Service}/request` +
        "\n" +
        CanonicalRequestHash;
      return StringToSign;
    },
    //计算签名
    Authorization() {
      const kData = this.HMAC(this.SecretAccessKey, this.utcTimeShort);
      const kRegion = this.HMAC(kData, this.Region);
      const kService = this.HMAC(kRegion, this.Service);
      const kSigning = this.HMAC(kService, "request");
      const signature = this.HMAC(kSigning, this.StringToSign).toString(
        CryptoJS.enc.Hex
      );
      const Authorization =
        `HMAC-SHA256 Credential=${this.AccessKeyID}/` +
        this.utcTimeShort +
        "/" +
        this.Region +
        "/" +
        this.Service +
        `/request, SignedHeaders=${this.SignedHeaders}, Signature=` +
        signature;
      return Authorization;
    },
  },
  watch: {
    isGenerating(newVal) {
      if (newVal) {
        this.startGeneratingAnimation();
      } else {
        this.stopGeneratingAnimation();
      }
    },
    chatMessages() {
      this.$nextTick(() => {
        if (this.$refs.chatMessages) {
          this.$refs.chatMessages.scrollTop =
            this.$refs.chatMessages.scrollHeight;
        }
      });
    },
  },
  created() {
    // 检查URL参数，判断是否有模板ID
    const templateId = this.$route.query.template;

    // 如果有模板ID，加载对应的花束模板
    if (templateId) {
      this.loadBouquetTemplate();
    }

    // 加载收藏数据
    this.loadFavorites();
  },
  beforeUnmount() {
    this.stopGeneratingAnimation();
  },
  methods: {
    //新对话
    newChat() {
      this.$router.push({
        path: "/diy/ai",
      });
    },
    // 计算SHA256哈希的方法
    sha256Hash(input) {
      const hash = CryptoJS.SHA256(input);
      return hash.toString(CryptoJS.enc.Hex);
    },

    // 获取UTC时间并格式化方法
    getUtcTime() {
      const now = new Date();
      const isoString = now.toISOString();
      const formattedUtcTime = isoString.slice(0, 19).replace(/[-:]/g, "");
      this.utcTime = formattedUtcTime + "Z";
    },
    getShotUtcTime() {
      const now = new Date();
      const year = now.getUTCFullYear();
      const month = String(now.getUTCMonth() + 1).padStart(2, "0");
      const day = String(now.getUTCDate()).padStart(2, "0");
      this.utcTimeShort = `${year}${month}${day}`;
    },
    //派生签名密钥方法
    HMAC(secret, s) {
      return CryptoJS.HmacSHA256(s, secret);
    },
    // 收藏相关方法
    loadFavorites() {
      const storedFavorites = localStorage.getItem("userFavorites");
      if (storedFavorites) {
        this.favorites = JSON.parse(storedFavorites);
      }
    },
    saveFavorites() {
      localStorage.setItem("userFavorites", JSON.stringify(this.favorites));
    },
    isFavorited(type) {
      if (type === "custom") {
        // 检查当前自定义花束是否已收藏
        return this.favorites.some(
          (fav) =>
            fav.type === "custom" && fav.id === this.generateCustomBouquetId()
        );
      } else if (type === "ai" && this.aiGeneratedBouquet) {
        // 检查当前AI生成花束是否已收藏
        return this.favorites.some(
          (fav) => fav.type === "ai" && fav.id === this.aiGeneratedBouquet.name
        );
      }
      return false;
    },
    isFavoritedRecommended(bouquetId) {
      // 检查推荐花束是否已收藏
      return this.favorites.some(
        (fav) => fav.type === "recommended" && fav.id === bouquetId
      );
    },
    generateCustomBouquetId() {
      // 生成自定义花束的唯一ID
      const flowerIds = this.selectedFlowers
        .map((f) => `${f.id}-${f.quantity}`)
        .join("_");
      const packagingId = this.selectedPackaging
        ? this.selectedPackaging.id
        : "none";
      const cardId = this.selectedCard ? this.selectedCard.id : "none";
      return `custom-${flowerIds}-${packagingId}-${cardId}`;
    },
    toggleFavorite(type, sourceType) {
      if (sourceType === "recommended" && type) {
        // 收藏推荐花束
        const bouquet = type; // 这里type实际上是bouquet对象
        const existingIndex = this.favorites.findIndex(
          (fav) => fav.type === "recommended" && fav.id === bouquet.id
        );

        if (existingIndex !== -1) {
          // 移除收藏
          this.favorites.splice(existingIndex, 1);
          this.showFavoriteToast = true;
          this.favoriteToastType = "remove";
        } else {
          // 添加收藏
          const recommendedBouquet = {
            id: bouquet.id,
            type: "recommended",
            name: bouquet.name,
            price: bouquet.price,
            image: bouquet.image,
            flowers: [...bouquet.flowers],
            packaging: bouquet.packaging,
            date: new Date().toISOString(),
          };

          this.favorites.push(recommendedBouquet);
          this.showFavoriteToast = true;
          this.favoriteToastType = "add";
        }

        this.saveFavorites();
        this.hideToastAfterDelay();
        return;
      }

      if (type === "custom" && this.selectedFlowers.length > 0) {
        const customBouquetId = this.generateCustomBouquetId();
        const existingIndex = this.favorites.findIndex(
          (fav) => fav.type === "custom" && fav.id === customBouquetId
        );

        if (existingIndex !== -1) {
          // 移除收藏
          this.favorites.splice(existingIndex, 1);
          this.showFavoriteToast = true;
          this.favoriteToastType = "remove";
        } else {
          // 添加收藏
          const customBouquet = {
            id: customBouquetId,
            type: "custom",
            name: this.bouquetName || "自定义花束",
            price: this.calculateTotalPrice(),
            image: this.previewImage,
            flowers: [...this.selectedFlowers],
            packaging: this.selectedPackaging
              ? { ...this.selectedPackaging }
              : null,
            card: this.selectedCard
              ? { ...this.selectedCard, message: this.cardMessage }
              : null,
            date: new Date().toISOString(),
          };

          this.favorites.push(customBouquet);
          this.showFavoriteToast = true;
          this.favoriteToastType = "add";
        }

        this.saveFavorites();
        this.hideToastAfterDelay();
      } else if (type === "ai" && this.aiGeneratedBouquet) {
        const existingIndex = this.favorites.findIndex(
          (fav) => fav.type === "ai" && fav.id === this.aiGeneratedBouquet.name
        );

        if (existingIndex !== -1) {
          // 移除收藏
          this.favorites.splice(existingIndex, 1);
          this.showFavoriteToast = true;
          this.favoriteToastType = "remove";
        } else {
          // 添加收藏
          const aiBouquet = {
            id: this.aiGeneratedBouquet.name,
            type: "ai",
            name: this.aiGeneratedBouquet.name,
            price: this.aiGeneratedBouquet.price,
            image: this.aiGeneratedBouquet.image,
            flowers: [...this.aiGeneratedBouquet.flowers],
            packaging:
              this.availablePackaging.find(
                (p) => p.id === this.aiGeneratedBouquet.packaging
              ) || null,
            description: this.aiGeneratedBouquet.description,
            prompt: this.aiGeneratedBouquet.prompt,
            date: new Date().toISOString(),
          };

          this.favorites.push(aiBouquet);
          this.showFavoriteToast = true;
          this.favoriteToastType = "add";
        }

        this.saveFavorites();
        this.hideToastAfterDelay();
      }
    },
    hideToastAfterDelay() {
      setTimeout(() => {
        this.showFavoriteToast = false;
      }, 2000);
    },

    // 搜索和推荐相关方法
    searchBouquets() {
      // 实现搜索逻辑
      console.log("搜索:", this.searchQuery);

      // 根据搜索词过滤花材
      if (this.searchQuery.trim()) {
        const query = this.searchQuery.toLowerCase();

        // 根据当前选项卡执行不同的搜索
        if (this.activeTab === "flowers") {
          // 过滤花材
          const filteredFlowers = this.availableFlowers.filter((flower) =>
            flower.name.toLowerCase().includes(query)
          );

          // 高亮显示搜索结果
          if (filteredFlowers.length > 0) {
            // 可以添加高亮逻辑
            console.log("找到匹配的花材:", filteredFlowers);
          }
        } else if (this.activeTab === "packaging") {
          // 过滤包装
          const filteredPackaging = this.availablePackaging.filter((pkg) =>
            pkg.name.toLowerCase().includes(query)
          );

          if (filteredPackaging.length > 0) {
            console.log("找到匹配的包装:", filteredPackaging);
          }
        } else if (this.activeTab === "card") {
          // 过滤贺卡
          const filteredCards = this.availableCards.filter((card) =>
            card.name.toLowerCase().includes(query)
          );

          if (filteredCards.length > 0) {
            console.log("找到匹配的贺卡:", filteredCards);
          }
        }
      }
    },
    selectRecommendedBouquet(bouquet) {
      // 将推荐花束应用到自由创作
      this.bouquetName = bouquet.name;
      this.selectedFlowers = bouquet.flowers.map((flower) => {
        const flowerInfo =
          this.availableFlowers.find((f) => f.id === flower.id) || {};
        return {
          ...flowerInfo,
          quantity: flower.quantity,
        };
      });
      this.selectedPackaging =
        this.availablePackaging.find((p) => p.id === bouquet.packaging) || null;

      // 设置预览图片
      this.previewImage = bouquet.image;

      // 确保价格一致性 - 直接使用推荐花束的价格
      this.bouquetPrice = bouquet.price;

      this.activeTab = "flowers";

      // 滚动到自由创作区域
      this.$nextTick(() => {
        const element = document.querySelector(".free-creation-section");
        if (element) {
          element.scrollIntoView({ behavior: "smooth" });
        }
      });
    },

    // 自由创作模式方法
    loadBouquetTemplate() {
      // 从localStorage获取选中的花束信息
      const storedBouquet = localStorage.getItem("selectedBouquet");
      if (storedBouquet) {
        const bouquet = JSON.parse(storedBouquet);

        // 设置花束名称和预览图
        this.bouquetName = bouquet.name || "";
        if (bouquet.image) {
          this.previewImage = bouquet.image;
        }

        // 设置选中的花材
        if (bouquet.flowers && bouquet.flowers.length > 0) {
          this.selectedFlowers = bouquet.flowers.map((flower) => {
            const flowerInfo =
              this.availableFlowers.find((f) => f.id === flower.id) || {};
            return {
              id: flower.id,
              name: flower.name || flowerInfo.name,
              price: flowerInfo.price || 0,
              quantity: flower.quantity,
              image: flowerInfo.image,
            };
          });
        }

        // 设置选中的包装
        if (bouquet.packaging) {
          this.selectedPackaging =
            this.availablePackaging.find((p) => p.id === bouquet.packaging) ||
            null;
        }

        // 自动切换到包装选择标签，引导用户继续完成定制
        this.activeTab = "packaging";
      }
    },
    isFlowerSelected(flowerId) {
      return this.selectedFlowers.some((flower) => flower.id === flowerId);
    },
    getFlowerQuantity(flowerId) {
      const flower = this.selectedFlowers.find(
        (flower) => flower.id === flowerId
      );
      return flower ? flower.quantity : 0;
    },
    increaseFlowerQuantity(flowerId) {
      const flower = this.selectedFlowers.find(
        (flower) => flower.id === flowerId
      );
      if (flower) {
        flower.quantity += 1;
      } else {
        const flowerToAdd = this.availableFlowers.find(
          (flower) => flower.id === flowerId
        );
        this.selectedFlowers.push({
          ...flowerToAdd,
          quantity: 1,
        });
      }
    },
    decreaseFlowerQuantity(flowerId) {
      const flowerIndex = this.selectedFlowers.findIndex(
        (flower) => flower.id === flowerId
      );
      if (flowerIndex !== -1) {
        if (this.selectedFlowers[flowerIndex].quantity > 1) {
          this.selectedFlowers[flowerIndex].quantity -= 1;
        } else {
          this.selectedFlowers.splice(flowerIndex, 1);
        }
      }
    },
    selectPackaging(packaging) {
      this.selectedPackaging = packaging;
    },
    selectCard(card) {
      this.selectedCard = card;
    },
    calculateTotalPrice() {
      // 如果有设置bouquetPrice，则直接返回
      if (this.bouquetPrice > 0) {
        return this.bouquetPrice;
      }

      let total = 0;

      // 花材价格
      this.selectedFlowers.forEach((flower) => {
        total += flower.price * flower.quantity;
      });

      // 包装价格
      if (this.selectedPackaging) {
        total += this.selectedPackaging.price;
      }

      // 贺卡价格
      if (this.selectedCard) {
        total += this.selectedCard.price;
      }

      return total;
    },
    resetSelection() {
      this.selectedFlowers = [];
      this.selectedPackaging = null;
      this.selectedCard = null;
      this.cardMessage = "";
      this.bouquetName = "";
      this.previewImage = "@/assets/images/bouquet-preview.jpg";
      this.bouquetPrice = 0; // 重置价格
      this.activeTab = "flowers";
    },
    addToCart() {
      // 构建花束数据
      const bouquetData = {
        name: this.bouquetName || "自定义花束",
        price: this.calculateTotalPrice(),
        image: this.previewImage,
        flowers: [...this.selectedFlowers],
        packaging: this.selectedPackaging
          ? { ...this.selectedPackaging }
          : null,
        card: this.selectedCard
          ? { ...this.selectedCard, message: this.cardMessage }
          : null,
        type: "custom",
      };

      // 使用自定义事件发送数据到购物车组件
      const event = new CustomEvent("add-to-cart", {
        detail: bouquetData,
        bubbles: true,
      });
      window.dispatchEvent(event);
    },

    // 新增方法：从自由创作生成AI花束
    generateFromSelection() {
      // 检查是否有选择花材
      if (this.selectedFlowers.length === 0) {
        alert("请先选择至少一种花材");
        return;
      }

      // 构建提示词
      let prompt = "基于以下花材设计一束花: ";
      this.selectedFlowers.forEach((flower, index) => {
        prompt += `${flower.name} x${flower.quantity}`;
        if (index < this.selectedFlowers.length - 1) {
          prompt += ", ";
        }
      });

      if (this.selectedPackaging) {
        prompt += `，使用${this.selectedPackaging.name}包装`;
      }

      // 设置聊天输入
      this.chatInput = prompt;

      // 滚动到AI生成区域
      this.$nextTick(() => {
        const element = document.querySelector(".ai-generation-section");
        if (element) {
          element.scrollIntoView({ behavior: "smooth" });
        }

        // 发送消息
        this.sendChatMessage();
      });
    },

    // AI生成模式方法
    sendChatMessage() {
      if (!this.chatInput.trim()) return;

      // 添加用户消息
      this.chatMessages.push({
        sender: "user",
        text: this.chatInput,
      });

      const userPrompt = this.chatInput;
      this.chatInput = "";

      // 添加AI回复
      setTimeout(() => {
        this.chatMessages.push({
          sender: "ai",
          text: "我会根据您的需求设计一束花。请稍等片刻...",
        });

        // 开始生成花束
        this.generateAIBouquet(userPrompt);
      }, 500);
    },
    useQuickPrompt(prompt) {
      this.chatInput = prompt;
      this.sendChatMessage();
    },
    async generateAIBouquet(prompt) {
      // 开始生成动画
      this.isGenerating = true;
      this.aiGeneratedBouquet = null;

      // 构建提示词
      let fullPrompt = prompt || "生成一束花";
      if (this.title == "") this.title = prompt || "生成一束花";
      if(this.Inscription=="")this.Inscription = prompt || "生成一束花"

      await axios({
        url: `http://localhost:8086/chat/standard`,
        method: "POST",
        data: {
          message: fullPrompt,
        },
      })
        .then((res) => {
          fullPrompt = res.data[0];
        })
        .catch((err) => {
          console.log(err);
        });

      //AI请求
      if (this.isClick == 1) {
        let requestData = {
          message: fullPrompt,
        };
        await axios({
          url: "http://localhost:8086/chat/generate-image",
          method: "POST",
          data: requestData,
        })
          .then((res) => {
            console.log(res);
            this.image = res.data.image_url;
            this.generatingStep++;
            this.isClick = 2;
            this.aiGeneratedBouquet = {
              name: this.title,
              description: `这是一束根据您的需求"${prompt}"设计的花束。`,
              price: Math.floor(Math.random() * 200) + 150,
              image: res.data.image_url,
              flowers: this.generateRandomFlowers(),
              packaging: Math.floor(Math.random() * 3) + 1,
              prompt: this.Inscription,
            };

            this.isGenerating = false;

            // 添加AI回复
            this.chatMessages.push({
              sender: "ai",
              text: `已为您设计，您可以查看左方的设计效果。`,
            });
            if (this.$store.state.price !== "") {
              this.chatMessages.push({
                sender: "ai",
                text: `花材组成：${this.$store.state.FlowerMaterial}`,
              });
            }
          })
          .catch((err) => {
            console.log(err);
          });
      } else if (this.isClick == 2) {
        await axios({
          url: "http://localhost:8086/chat/modify-image",
          method: "POST",
          data: {
            prompt: "在原有花不变的基础上，新添加，"+fullPrompt,
            imageUrls: [this.image],
          },
        })
          .then((res) => {
            console.log(res);
            this.image = res.data.image_url;

            this.generatingStep++;
            this.Inscription += "，"+prompt;
            this.aiGeneratedBouquet = {
              name: this.title,
              description: `这是一束根据您的需求"${prompt}"设计的花束。`,
              price: Math.floor(Math.random() * 200) + 150,
              image: res.data.image_url,
              flowers: this.generateRandomFlowers(),
              packaging: Math.floor(Math.random() * 3) + 1,
              prompt: this.Inscription,
            };

            this.isGenerating = false;

            // 添加AI回复
            this.chatMessages.push({
              sender: "ai",
              text: `已为您设计，您可以查看左方的设计效果。`,
            });
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    regenerateAIBouquet() {
      // 重新生成花束
      this.generateAIBouquet(this.aiGeneratedBouquet.prompt);
    },
    useAIBouquet() {
      // 将AI生成的花束应用到自由创作模式
      if (this.aiGeneratedBouquet) {
        this.bouquetName = this.aiGeneratedBouquet.name;
        this.selectedFlowers = this.aiGeneratedBouquet.flowers.map((flower) => {
          const flowerInfo =
            this.availableFlowers.find((f) => f.id === flower.id) || {};
          return {
            ...flowerInfo,
            quantity: flower.quantity,
          };
        });
        this.selectedPackaging =
          this.availablePackaging.find(
            (p) => p.id === this.aiGeneratedBouquet.packaging
          ) || null;
        this.previewImage = this.aiGeneratedBouquet.image;
        this.bouquetPrice = this.aiGeneratedBouquet.price; // 设置价格
        this.activeTab = "flowers";

        // 滚动到自由创作区域
        this.$nextTick(() => {
          const element = document.querySelector(".free-creation-section");
          if (element) {
            element.scrollIntoView({ behavior: "smooth" });
          }
        });
      }
    },
    addAIBouquetToCart() {
      if (this.aiGeneratedBouquet) {
        // 构建花束数据
        const bouquetData = {
          name: this.aiGeneratedBouquet.name,
          price: this.aiGeneratedBouquet.price,
          image: this.aiGeneratedBouquet.image,
          flowers: [...this.aiGeneratedBouquet.flowers],
          packaging:
            this.availablePackaging.find(
              (p) => p.id === this.aiGeneratedBouquet.packaging
            ) || null,
          prompt: this.aiGeneratedBouquet.prompt,
          type: "ai",
        };

        // 使用自定义事件发送数据到购物车组件
        const event = new CustomEvent("add-to-cart", {
          detail: bouquetData,
          bubbles: true,
        });
        window.dispatchEvent(event);

        // 添加AI回复
        this.chatMessages.push({
          sender: "ai",
          text: `您的花束"${this.aiGeneratedBouquet.name}"已添加到购物车。`,
        });
      }
    },

    // AI生成动画相关方法
    startGeneratingAnimation() {
      this.generatingStep = 0;
      this.currentTipIndex = 0;

      // 逐步显示生成进度
      const stepInterval = setInterval(() => {
        if (this.generatingStep < 3) {
          this.generatingStep++;
        } else {
          clearInterval(stepInterval);
        }
      }, 1500);

      // 循环显示提示
      this.tipInterval = setInterval(() => {
        this.currentTipIndex =
          (this.currentTipIndex + 1) % this.generatingTips.length;
      }, 3000);
    },
    stopGeneratingAnimation() {
      if (this.tipInterval) {
        clearInterval(this.tipInterval);
        this.tipInterval = null;
      }
    },

    // 辅助方法

    generateRandomFlowers() {
      // 生成随机花材组合
      const result = [];
      const flowerCount = Math.floor(Math.random() * 3) + 3; // 3-5种花材

      for (let i = 0; i < flowerCount; i++) {
        const flowerId =
          Math.floor(Math.random() * this.availableFlowers.length) + 1;
        const quantity = Math.floor(Math.random() * 5) + 1; // 1-5支

        // 检查是否已添加该花材
        const existingFlower = result.find((f) => f.id === flowerId);
        if (existingFlower) {
          existingFlower.quantity += quantity;
        } else {
          const flower = this.availableFlowers.find((f) => f.id === flowerId);
          if (flower) {
            result.push({
              id: flower.id,
              name: flower.name,
              quantity: quantity,
            });
          }
        }
      }

      // 确保至少有一种花材
      if (result.length === 0) {
        const defaultFlower = this.availableFlowers[0];
        result.push({
          id: defaultFlower.id,
          name: defaultFlower.name,
          quantity: 5,
        });
      }

      return result;
    },
  },
  mounted() {
    this.sendChatMessage();
  },
};
</script>

<style scoped>
.diy-page {
  padding-top: 70px; /* 为固定头部留出空间 */
  background: linear-gradient(135deg, #d693a1, #e2f5ff);
  min-height: 100vh;
}

.page-header {
  background-color: rgba(255, 255, 255, 0.7);
  padding: 2rem 0;
  text-align: center;
  margin-bottom: 2rem;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

.page-title {
  color: #e75480;
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.page-description {
  color: #666;
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
}

/* 搜索和推荐区域 */
.recommendations {
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.search-container {
  position: relative;
  margin: 1rem 0;
  padding: 0 1rem;
}

.search-input {
  width: 100%;
  padding: 0.8rem 3rem 0.8rem 1rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 1rem;
  transition: all 0.3s;
}

.search-input:focus {
  outline: none;
  border-color: #e75480;
  box-shadow: 0 0 0 2px rgba(231, 84, 128, 0.1);
}

.search-btn {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  color: #666;
}

.recommendation-tabs {
  display: flex;
  border-bottom: 1px solid #eee;
  margin-bottom: 1rem;
}

.recommendation-tabs .tab-btn {
  padding: 0.8rem 1.5rem;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  color: #666;
  transition: all 0.3s;
  border-bottom: 2px solid transparent;
}

.recommendation-tabs .tab-btn:hover {
  color: #e75480;
}

.recommendation-tabs .tab-btn.active {
  color: #e75480;
  border-bottom-color: #e75480;
  font-weight: 500;
}

.bouquet-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.bouquet-card {
  background-color: #f9f9f9;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s;
  cursor: pointer;
}

.bouquet-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.bouquet-image {
  height: 150px;
  overflow: hidden;
  position: relative;
}

.bouquet-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bouquet-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #e75480;
  color: white;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-size: 0.8rem;
}

.bouquet-badge.popular {
  background-color: #f5a623;
}

.bouquet-badge.nearby {
  background-color: #4a90e2;
}

.bouquet-info {
  padding: 1rem;
  text-align: center;
}

.bouquet-name {
  font-size: 1rem;
  margin-bottom: 0.3rem;
  color: #333;
}

.bouquet-price {
  color: #e75480;
  font-weight: 500;
  margin-bottom: 0.8rem;
}

.select-bouquet-btn {
  width: 100%;
  padding: 0.5rem;
  background-color: #e75480;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
  font-size: 0.9rem;
}

.select-bouquet-btn:hover {
  background-color: #d64d7b;
}

/* 主要内容区域 */
.main-content-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-bottom: 3rem;
}

.section-title {
  font-size: 1.5rem;
  color: #333;
  margin-bottom: 0.5rem;
}

.section-description {
  color: #666;
  margin-bottom: 1.5rem;
}

/* 自由创作区域 */
.free-creation-section {
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
}

.preview-container {
  background-color: #f9f9f9;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.bouquet-preview {
  height: 200px;
  overflow: hidden;
  position: relative;
}

.preview-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 收藏按钮 */
.favorite-btn {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.8);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  cursor: pointer;
  transition: all 0.3s;
  z-index: 10;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.favorite-btn:hover {
  background-color: white;
  transform: scale(1.1);
}

.favorite-btn.favorited {
  background-color: rgba(255, 255, 255, 0.9);
}

/* 收藏提示 */
.favorite-toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 0.8rem 1.5rem;
  border-radius: 30px;
  z-index: 1000;
  animation: fadeInOut 2s ease-in-out;
}

.toast-content {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.toast-icon {
  font-size: 1.2rem;
}

.toast-message {
  font-size: 0.9rem;
}

@keyframes fadeInOut {
  0% {
    opacity: 0;
    transform: translate(-50%, 20px);
  }
  20% {
    opacity: 1;
    transform: translate(-50%, 0);
  }
  80% {
    opacity: 1;
    transform: translate(-50%, 0);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -20px);
  }
}

.preview-info {
  padding: 1rem;
}

.preview-title {
  font-size: 1.2rem;
  margin-bottom: 0.3rem;
  color: #333;
}

.preview-price {
  font-size: 1.3rem;
  font-weight: bold;
  color: #e75480;
  margin-bottom: 0.8rem;
}

.preview-details {
  color: #666;
  font-size: 0.9rem;
}

.preview-details p {
  margin-bottom: 0.3rem;
}

.action-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.8rem;
  padding: 0 1rem 1rem;
}

.btn-outline {
  padding: 0.7rem 0;
  background: none;
  border: 1px solid #e75480;
  color: #e75480;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
  text-align: center;
}

.btn-outline:hover {
  background-color: #f8e1e7;
}

.btn-primary {
  padding: 0.7rem 0;
  background-color: #e75480;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
  text-align: center;
}

.btn-primary:hover {
  background-color: #d64d7b;
}

/* 新增AI生成按钮样式 */
.btn-ai {
  padding: 0.7rem 0;
  background-color: #f8e1e7;
  border: 1px solid #e75480;
  color: #e75480;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
  text-align: center;
}

.btn-ai:hover {
  background-color: #f5d0dc;
}

.selection-section {
  background-color: #f9f9f9;
  border-radius: 8px;
}

.selection-tabs {
  display: flex;
  border-bottom: 1px solid #eee;
}

.tab-btn {
  flex: 1;
  padding: 0.8rem;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.9rem;
  color: #666;
  transition: all 0.3s;
  border-bottom: 2px solid transparent;
}

.tab-btn:hover {
  color: #e75480;
}

.tab-btn.active {
  color: #e75480;
  border-bottom-color: #e75480;
  font-weight: 500;
}

.selection-content {
  padding: 1.5rem;
  max-height: 400px;
  overflow-y: auto;
}

.selection-title {
  font-size: 1.1rem;
  margin-bottom: 0.3rem;
  color: #333;
}

.selection-description {
  color: #666;
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
}

/* 花材选择 */
.flowers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.flower-card {
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s;
  border: 2px solid transparent;
}

.flower-card:hover {
  transform: translateY(-3px);
}

.flower-card.selected {
  border-color: #e75480;
  box-shadow: 0 2px 10px rgba(231, 84, 128, 0.2);
}

.flower-image {
  height: 100px;
  overflow: hidden;
}

.flower-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.flower-info {
  padding: 0.8rem;
}

.flower-name {
  font-size: 1rem;
  margin-bottom: 0.2rem;
  color: #333;
}

.flower-price {
  color: #e75480;
  font-weight: 500;
  margin-bottom: 0.8rem;
  font-size: 0.9rem;
}

.quantity-selector {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: white;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid #ddd;
}

.quantity-btn {
  width: 30px;
  height: 30px;
  background: none;
  border: none;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.3s;
}

.quantity-btn:hover {
  background-color: #f0f0f0;
}

.quantity-btn:disabled {
  color: #ccc;
  cursor: not-allowed;
}

.plus-btn {
  color: #e75480;
  font-weight: bold;
}

.plus-icon {
  display: inline-block;
  font-weight: bold;
  color: #e75480;
}

.quantity {
  flex: 1;
  text-align: center;
  font-size: 0.9rem;
}

/* 包装选择 */
.packaging-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.packaging-card {
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s;
  cursor: pointer;
  border: 2px solid transparent;
}

.packaging-card:hover {
  transform: translateY(-3px);
}

.packaging-card.selected {
  border-color: #e75480;
  box-shadow: 0 2px 10px rgba(231, 84, 128, 0.2);
}

.packaging-image {
  height: 100px;
  overflow: hidden;
}

.packaging-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.packaging-info {
  padding: 0.8rem;
}

.packaging-name {
  font-size: 1rem;
  margin-bottom: 0.2rem;
  color: #333;
}

.packaging-price {
  color: #e75480;
  font-weight: 500;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}

.packaging-select {
  text-align: center;
  font-size: 0.9rem;
}

.select-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 0.8rem;
  background: none;
  border: 1px solid #e75480;
  color: #e75480;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
  font-size: 0.8rem;
}

.select-btn:hover {
  background-color: #f8e1e7;
}

/* 贺卡选择 */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.card-item {
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s;
  cursor: pointer;
  border: 2px solid transparent;
  padding: 0.8rem;
}

.card-item:hover {
  transform: translateY(-3px);
}

.card-item.selected {
  border-color: #e75480;
  box-shadow: 0 2px 10px rgba(231, 84, 128, 0.2);
}

.card-image {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.8rem;
}

.card-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.card-info {
  text-align: center;
  margin-bottom: 0.8rem;
}

.card-name {
  font-size: 1rem;
  margin-bottom: 0.2rem;
  color: #333;
}

.card-price {
  color: #e75480;
  font-weight: 500;
  font-size: 0.9rem;
}

.card-select {
  text-align: center;
  font-size: 0.9rem;
}

.card-message {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid #eee;
}

.message-title {
  font-size: 1rem;
  margin-bottom: 0.8rem;
  color: #333;
}

.message-input {
  width: 100%;
  padding: 0.8rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  resize: vertical;
  font-size: 0.9rem;
  transition: all 0.3s;
}

.message-input:focus {
  outline: none;
  border-color: #e75480;
  box-shadow: 0 0 0 2px rgba(231, 84, 128, 0.1);
}

/* AI生成区域 */
.ai-generation-section {
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
}

/* AI对话框 */
.ai-chat-container {
  background-color: #f9f9f9;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.chat-messages {
  height: 530px;
  overflow-y: auto;
  padding: 1rem;
}

.message {
  display: flex;
  margin-bottom: 1rem;
}

.ai-message {
  flex-direction: row;
}

.user-message {
  flex-direction: row-reverse;
}

.message-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  margin: 0 0.8rem;
}

.ai-message .message-avatar {
  background-color: #e75480;
  color: white;
}

.user-message .message-avatar {
  background-color: #4a90e2;
  color: white;
}

.message-content {
  max-width: 70%;
  padding: 0.8rem;
  border-radius: 8px;
  font-size: 0.9rem;
}

.ai-message .message-content {
  background-color: white;
  border: 1px solid #eee;
}

.user-message .message-content {
  background-color: #4a90e2;
  color: white;
}

.typing-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
}

.typing-indicator span {
  width: 8px;
  height: 8px;
  background-color: #e75480;
  border-radius: 50%;
  display: inline-block;
  animation: typing 1s infinite ease-in-out;
}

.typing-indicator span:nth-child(1) {
  animation-delay: 0.1s;
}

.typing-indicator span:nth-child(2) {
  animation-delay: 0.2s;
}

.typing-indicator span:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes typing {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
  100% {
    transform: translateY(0);
  }
}

.chat-input-container {
  display: flex;
  padding: 1rem;
  border-top: 1px solid #eee;
}

.chat-input {
  flex: 1;
  padding: 0.8rem;
  border: 1px solid #ddd;
  border-radius: 20px;
  font-size: 0.9rem;
  transition: all 0.3s;
}

.chat-input:focus {
  outline: none;
  border-color: #e75480;
  box-shadow: 0 0 0 2px rgba(231, 84, 128, 0.1);
}

.chat-send-btn {
  margin-left: 0.8rem;
  padding: 0 1.5rem;
  background-color: #e75480;
  color: white;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.chat-send-btn:hover {
  background-color: #d64d7b;
}

.chat-send-btn:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

.quick-prompts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0 1rem 1rem;
}

.quick-prompt-btn {
  padding: 0.5rem 1rem;
  background-color: #f0f0f0;
  border: 1px solid #ddd;
  border-radius: 20px;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.3s;
}

.quick-prompt-btn:hover {
  background-color: #e0e0e0;
}

.quick-prompt-btn:disabled {
  color: #aaa;
  cursor: not-allowed;
}

/* AI生成结果 */
.ai-result {
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  padding: 1rem;
}

.result-preview {
  height: 520px;
  overflow: hidden;
  border-radius: 8px;
  margin-bottom: 1rem;
  position: relative;
  display: flex;
  justify-content: space-evenly;
}

.ai-preview-image {
  aspect-ratio: 1 / 1;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
}

.result-title {
  font-size: 1.2rem;
  margin-bottom: 0.3rem;
  color: #333;
}

.result-description {
  color: #666;
  margin-bottom: 0.8rem;
  font-size: 0.9rem;
}

.result-price {
  font-size: 1.2rem;
  font-weight: bold;
  color: #e75480;
  margin-bottom: 1rem;
}

.result-details {
  margin-bottom: 1rem;
}

.details-title {
  font-size: 1rem;
  margin-bottom: 0.5rem;
  color: #333;
}

.flowers-list {
  list-style: none;
  padding: 0;
}

.flowers-list li {
  padding: 0.4rem 0;
  border-bottom: 1px solid #eee;
  font-size: 0.9rem;
}

.result-actions {
  display: flex;
  gap: 50px;
  justify-content: center;
}
.result-actions button {
  padding-left: 10px;
  padding-right: 10px;
}

/* 增强的AI生成等待动画 */
.ai-generating-animation {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  text-align: center;
  background-color: #fff;
  border-radius: 8px;
}

.flower-animation-container {
  position: relative;
  width: 150px;
  height: 150px;
  margin-bottom: 1.5rem;
}

.flower-animation {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  z-index: 2;
}

.flower-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
  background-color: #e75480;
  border-radius: 50%;
  z-index: 2;
}

.flower-petal {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 40px;
  background-color: #f8e1e7;
  border-radius: 50%;
  transform-origin: center bottom;
  animation: petal-animation 3s infinite ease-in-out;
}

/* 小花动态加载效果 */
.mini-flowers-container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.mini-flower {
  position: absolute;
  font-size: 1.5rem;
  animation: float-animation 5s infinite ease-in-out;
  opacity: 0;
}

.mini-flower-1 {
  top: 20%;
  left: 10%;
  animation-delay: 0.5s;
}

.mini-flower-2 {
  top: 10%;
  left: 70%;
  animation-delay: 1s;
}

.mini-flower-3 {
  top: 70%;
  left: 20%;
  animation-delay: 1.5s;
}

.mini-flower-4 {
  top: 60%;
  left: 80%;
  animation-delay: 2s;
}

.mini-flower-5 {
  top: 40%;
  left: 90%;
  animation-delay: 2.5s;
}

.mini-flower-6 {
  top: 80%;
  left: 50%;
  animation-delay: 3s;
}

@keyframes float-animation {
  0% {
    transform: translateY(20px) rotate(0deg);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    transform: translateY(-20px) rotate(360deg);
    opacity: 0;
  }
}

@keyframes petal-animation {
  0%,
  100% {
    transform: rotate(var(--rotation)) translateY(-20px) scale(1);
  }
  50% {
    transform: rotate(var(--rotation)) translateY(-25px) scale(1.1);
  }
}

.generating-text {
  font-size: 1.2rem;
  color: #e75480;
  margin-bottom: 1.5rem;
  font-weight: 500;
}

.generating-progress {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 1.5rem;
  position: relative;
}

.generating-progress::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #eee;
  z-index: 1;
}

.progress-step {
  position: relative;
  z-index: 2;
  background-color: #f9f9f9;
  padding: 0.5rem;
  border-radius: 20px;
  font-size: 0.8rem;
  color: #999;
  transition: all 0.3s;
}

.progress-step.active {
  background-color: #e75480;
  color: white;
}

.generating-tip {
  font-style: italic;
  color: #666;
  font-size: 0.9rem;
}

/* 响应式设计 */
@media (max-width: 992px) {
  .main-content-grid {
    grid-template-columns: 1fr;
  }

  .bouquet-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .free-creation-section {
    margin-bottom: 2rem;
  }
}

@media (max-width: 768px) {
  .flowers-grid,
  .packaging-grid,
  .cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .bouquet-cards,
  .flowers-grid,
  .packaging-grid,
  .cards-grid {
    grid-template-columns: 1fr;
  }

  .selection-tabs,
  .recommendation-tabs {
    flex-wrap: wrap;
  }

  .tab-btn {
    flex: 0 0 50%;
  }

  .message-content {
    max-width: 85%;
  }
}

/* 添加推荐花束卡片收藏按钮样式 */
.recommended-favorite-btn {
  bottom: 10px;
  top: auto;
}

.outBox {
  display: flex;
  justify-content: center;
  gap: 10px;
}
</style>